// import "jquery";
import * as React from "react";

import $ from "jquery";

export default function MyJquery() {
  $(() => {
    $("h1").html("xxxxxxx minh tien");
    $("div[title=test]").css("background", "#bbffaa");
    //选取每个父元素下的最后一个子元素
    $("div.one :last-child").css("background", "#bbffaa");

    //事件冒泡
  });

  $(function () {
    // 为span元素绑定click事件 $('span').bind("click",function(){
    const txt = $("#msg").html() + "<p>内层span元素被点 击.<p/>";
    $("#msg").html(txt);
    // 为div元素绑定click事件
    $("#content").bind("click", function () {
      const txt = $("#msg").html() + "<p>外层div元素被点击.<p/>";
      $("#msg").html(txt);
    });
  });
  return (
    <div className="App">
      <h1 />
      <div title="test">sssss111</div>
      <div id="content">
        外层div元素 <span>内层span元素</span> 外层div元素
      </div>
      <div id="msg"></div>
      <div className="one">
        <div className="mini">class为mini</div>
        <div className="mini">class为mini</div>{" "}
        <div className="mini">class为mini</div>
        <div className="mini"></div>
      </div>
    </div>
  );
}
